var MachineItem = function () {
  var finishRateSerie = {
    id: 'finishRate',
    name: '本单完成度',
    type: 'gauge',
    center: ['80%', 95],
    radius: 80,
    axisLine: {
      lineStyle: {
        color: [
          [0.09, '#ff4500'],
          [0.82, 'lime'],
          [1, '#1e90ff']
        ],
        width: 3,
        shadowColor: '#fff',
        shadowBlur: 10
      }
    },
    axisLabel: {
      distance: 0,
      textStyle: {
        color: '#fff',
        shadowColor: '#fff',
        shadowBlur: 10,
        fontSize: 10
      }
    },
    axisTick: {
      length: 15,
      lineStyle: {
        color: 'auto',
        shadowColor: '#fff',
        shadowBlur: 10
      }
    },
    splitLine: {
      length: 25,
      lineStyle: {
        width: 3,
        color: '#fff',
        shadowColor: '#fff',
        shadowBlur: 10
      }
    },
    pointer: {
      shadowColor: '#fff',
      shadowBlur: 5
    },
    detail: {
      formatter: '{value}%',
      fontSize: 15
    },
    title: {
      color: '#fff',
      fontSize: 12
    },
    data: [{
      value: 0,
      name: '完成度'
    }],
    tooltip: {
      formatter: "{a}：{c}%"
    }
  };

  var template = /* html */ `
    <div class="machine-item" :class="{'has-machine':machine!==null}">
      <template v-if="machine!==null">
      <div class="machine-item-content">
        <div class="machine-item-baseinfo">
          <table cellspacing="0" cellpadding="0">
            <colgroup>
              <col width="23%">
              <col width="27%">
              <col width="23%">
              <col width="27%">
            </colgroup>
            <tr>
              <td>设备编号</td>
              <td>{{machine.equipmentNo}}</td>
              <td>设备状态</td>
              <td>
                <div v-if="machine.status!==''" class="machine-status" :class="'status-'+machine.statusCode">
                  {{machine.status}}
                </div>
              </td>
            </tr>
            <tr>
              <td>工厂型号</td>
              <td>{{machine.factoryType}}</td>
              <td>日利用率</td>
              <td>
                <span v-if="machine.usedRatioOfDay!==''">{{machine.usedRatioOfDay}}%</span>
              </td>
            </tr>
            <tr>
              <td>订单编号</td>
              <td>{{machine.orderNo}}</td>
              <td>月利用率</td>
              <td>
                <span v-if="machine.usedRatioOfMonth!==''">{{machine.usedRatioOfMonth}}%</span>
              </td>
            </tr>
            <tr>
              <td>投料数</td>
              <td>{{machine.need}}</td>
              <td>完成时间</td>
              <td>
                <span v-if="machine.finishDate!==''">{{moment(machine.finishDate).format('YYYY-MM-DD')}}</span>
              </td>
            </tr>
            <tr>
              <td>加工数量</td>
              <td>{{machine.current}}</td>
              <td>日产能</td>
              <td>{{machine.totalOfDay}}</td>
            </tr>
            <tr>
              <td>单付均时</td>
              <td>
                <span v-if="machine.timeSingle!==''">{{machine.timeSingle}}s</span>
              </td>
              <td>月产能</td>
              <td>{{machine.totalOfMonth}}</td>
            </tr>
          </table>
        </div>
        <div class="machine-item-chart-content">
          <div class="machine-img-div">
            <img ref="machineImg" class="machine-img" :src="formatImgUrl(machine.equipmentImage)">
            <div class="machine-mask" :class="imgMaskClassName" :style="imgSize"></div>
          </div>
          <div class="machine-item-chart"></div>
        </div>
      </div>
      </template>
    </div>
  `;

  return {
    props: {
      machine: Object,
      isShow: {
        type: Boolean,
        default: true
      },
      chartStartDate: String
    },

    watch: {
      isShow: function (value) {
        if (value) {
          this.showChart();
        }
      },

      chartStartDate: function () {
        if (this.isShow) {
          this.refreshLineChart();
        }
      },

      'machine.finishRate': function () {
        if (this.isShow) {
          this.resetRateChart();
        }
      }
    },

    computed: {
      imgMaskClassName: function () {
        var statusCode = this.machine.statusCode;
        if (SysUtil.isEmpty(statusCode)) {
          return '';
        }
        return `mask-${statusCode}`;
      }
    },

    data: function () {
      return {
        moment: moment,
        chartOption: null,
        imgSize: {
          width: 0,
          height: 0
        }
      };
    },

    mounted: function () {
      if (this.isShow) {
        this.showChart();
      }
      var self = this;
      $(this.$el).find('.machine-item-chart').resize(function () {
        var $chart = $(self.$el).find('.machine-item-chart');
        var chart = echarts.getInstanceByDom($chart[0]);
        if (chart !== undefined) {
          chart.resize();
        }
      });

      $(this.$refs['machineImg']).resize(function () {
        self.setImgSize();
      });
      this.setImgSize();
    },

    methods: {
      getChart: function () {
        var $chart = $(this.$el).find('.machine-item-chart');
        var chart = echarts.getInstanceByDom($chart[0]);
        if (chart === undefined) {
          chart = echarts.init($chart[0]);
        }
        return chart;
      },

      getChartOption: function () {
        var chartOption = this.chartOption;
        if (chartOption !== null) {
          return chartOption;
        }
        var rateSerie = _.cloneDeep(finishRateSerie);
        var machineRecords = this.machine.machineRecords;
        var maxRecord = _.maxBy(machineRecords, 'machingCount');
        var maxCount = maxRecord.machingCount;
        if (maxCount === 0) {
          maxCount = 100;
        }
        maxCount += maxCount * 0.2;
        maxCount = _.ceil(maxCount, -2);

        chartOption = {
          dataset: {
            dimensions: ['createTime', 'machingCount']
          },
          grid: {
            right: 20,
            left: 50,
            bottom: 30,
            top: 20
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12,
              formatter: function (value) {
                return moment(value).format('MM-DD');
              }
            }
          },
          yAxis: {
            min: 0,
            max: maxCount,
            minInterval: 50,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12
            }
          },
          tooltip: {
            trigger: 'item'
          },
          series: [rateSerie, {
            type: "line",
            encode: {
              x: 'createTime',
              y: 'machingCount'
            },
            lineStyle: {
              color: '#6CF5F2'
            },
            itemStyle: {
              color: '#6CF5F2'
            }
          }]
        };
        this.chartOption = chartOption;
        return chartOption;
      },

      showChart: function () {
        var machine = this.machine;
        if (machine === null) {
          return;
        }
        var chart = this.getChart();
        var chartOption = this.getChartOption();
        var finishRate = machine.finishRate === '' ? 0 : machine.finishRate;
        chartOption.series[0].data[0].value = finishRate;

        var machineRecords = this.getLineData();
        chartOption.dataset.source = machineRecords;
        chart.setOption(chartOption, true);
      },

      refreshLineChart: function () {
        var machine = this.machine;
        if (machine === null) {
          return;
        }
        var $chart = $(this.$el).find('.machine-item-chart');
        var chart = echarts.getInstanceByDom($chart[0]);
        if (chart === undefined) {
          this.showChart();
          return;
        }

        var chartOption = this.getChartOption();
        var machineRecords = this.getLineData();
        chartOption.dataset.source = machineRecords;
        chart.setOption(chartOption, true);
      },

      resetRateChart: function () {
        var machine = this.machine;
        if (machine === null) {
          return;
        }
        var $chart = $(this.$el).find('.machine-item-chart');
        var chart = echarts.getInstanceByDom($chart[0]);
        if (chart === undefined) {
          this.showChart();
          return;
        }

        var chartOption = this.getChartOption();
        var finishRate = machine.finishRate === '' ? 0 : machine.finishRate;
        chartOption.series[0].data[0].value = finishRate;
        chart.setOption(chartOption, true);
      },

      getLineData: function () {
        var chartStartDate = this.chartStartDate;
        var machineRecords = this.machine.machineRecords;
        if (chartStartDate !== undefined) {
          var index = _.findIndex(machineRecords, {
            createTime: chartStartDate
          });
          if (index > -1) {
            machineRecords = machineRecords.slice(index, index + 10);
          }

          if (index === 20) {
            machineRecords[machineRecords.length - 1] = this.machine.totalOfDay;
          }
        }
        return machineRecords;
      },

      setImgSize: function () {
        var $img = $(this.$refs['machineImg']);
        var width = $img.width(),
          height = $img.height();
        this.imgSize = {
          width: width + 'px',
          height: height + 'px'
        };
      }
    },

    template: template
  };
}();
